<template>
  <div class="day">
    <div class="block">
     <el-date-picker
       v-model="dateValue"
       type="date"
       placeholder="选择日期时间"
       @change="change(dateValue)">
     </el-date-picker>
   </div>

    <el-table
            :data="information.data"
            highlight-current-row
            @cell-click="handleCurrentChange"
            border
            style="width: 100%"
     >
      <el-table-column
              type="index"
              width="100"
              align="left">
      </el-table-column>
      <el-table-column
              property="userName"
              label="姓名"
              align="left">
      </el-table-column>
      <el-table-column
              property="bizDate"
              label="日期"
              align="left"
              width="200">
      </el-table-column>
      <!--<el-table-column :formatter="numFormat" property="sale" label="销售额" width="150">-->
      <!--</el-table-column>-->
      <el-table-column
              :formatter="numFormat"
              property="commission"
              label="提成额"
              align="left">
      </el-table-column>
    </el-table>

    <pagination :total="information.pagination.total" align="right" :change="onTableChange"
                :pageSizeChange="handlePageSizeChange" :page-size="pageSize" :size-options="[20, 30, 50]"
                v-if="true"></pagination>
  </div>

</template>

<script>
  import moment from 'moment';
  export default {
      props: ['tableData', 'activeName'],
      name:'keepAilve',
      data: function () {
          return {
            dateValue: '',
            currentRow: null,
            tableList: this.tableData,
            loading: false,
            total: '20',
            pageSize: 20,
            information: {
                pagination: {},
                data: []
            },
          }
      },
      watch: {
         tableData() {
             this.information.data = this.tableData;
         }
       },

       beforeMount(){
           this.onTableChange(1);
       },

      methods: {
         //  点击当前行进入分录
         handleCurrentChange(val) {
           if(val){
             console.log(val)
             this.currentRow = val;
             console.log(this.currentRow);
             let args = {
               bizDate: this.currentRow.bizDate,
               type: this.activeName,
               userId: this.currentRow.userId
             };
             console.log(args)
             this.$router.push({
               name:'rd',
               path: '/report/details',
               params: args
             });
           }


         },
         //  改变日期查询
         change:function (dateValue) {
           console.log(moment(dateValue).format('YYYY-MM-DD'));
           console.log(this.activeName);
           let bizDate = '';
          //  if(this.activeName == "day"){
             bizDate = moment(dateValue).format('YYYY-MM-DD');
          //  }else if (this.activeName == "month") {
          //    bizDate = moment(dateValue).format('YYYY-MM');
          //  }

          console.log(bizDate)

           this.query(bizDate);
         },
         //  查询
         query:function (bizDate) {
          //  var self = this;
          //  console.log(bizDate);
          //  self.loading = true;
          //  this.$axioxs({
          //       method: 'get',
          //       url: '/commission/?bizDate='+bizDate
          //    })
          //  .then(function (res) {
          //      console.log(JSON.stringify(res.data));
          //      console.log(res.data);
          //      self.loading = false;
          //      self.tableList = res.data.records;
          //      if(self.activeName == "month"){
          //        for(var i=0; i<self.tableList.length; i++){
          //          self.tableList[i].bizDate = moment(self.tableList[i].bizDate).format("YYYY-MM");
          //        }
          //      }
          //  })
          //  .catch(function (error) {
          //    console.log(error);
          //    self.loading = true;
          //  });

          this.onTableChange(1, bizDate);

         },
         //  数字转换
         numFormat:function(row, column) {
            var num = row[column.property];
            if (num == undefined) {
              return "";
            }
            return Number(num).toFixed(2);
         },

         onTableChange: function (current,bizDate) {
             console.log(current)
             let param = {
                 page: current,
                 rows: this.pageSize,
                 bizDate: bizDate
             }

             console.log(param)
             var url = "";
             if(this.activeName == "month"){
               url = "/commission/month?" + this.$qs.stringify(param);
             }else {
               url = "/commission/?" + this.$qs.stringify(param);
             }

            //  console.log(url)



             this.loading = true;
              var self = this;
             this.$axioxs({
                  method: 'get',
                  url: url
               })
               .then(res => {
                 let data = res.data;
                 let pageinfo = {};
                 pageinfo.total = data.count;
                 pageinfo.pageSize = data.rows;
                 console.log(pageinfo.pageSize)
                 pageinfo.current = data.page;
                 pageinfo.last_page = data.totalPage;
                 self.information.pagination = pageinfo;
                 self.information.data = data.records;
                 console.log(self.activeName);
                 if(self.activeName == "month"){
                    for(var i=0; i<self.information.data.length; i++){
                      self.information.data[i].bizDate = moment(self.information.data[i].bizDate).format("YYYY-MM");
                    }
                  }

                  console.log(self.information.data)
                 self.pageSize = data.rows;
                 self.loading = false;
             }).catch(function (err) {
                 console.log(err);
                 self.loading = false;
             })
         },
         handlePageSizeChange(current, pageSize) {
             console.log('pageSize', pageSize);
             this.pageSize = Number(pageSize);
             let currentDate = new Date();
             let bizDate = moment(currentDate).format('YYYY-MM-DD');
             this.onTableChange(1, bizDate);

         }



        }

  }
</script>

<style scoped>
.el-date-editor{
  width: 50% !important;
  margin-left: 10px;
}

.el-table{
  margin-top: 10px;
}

</style>
